// 导入三个接口
import {createGroupBuy,createGroupBuyProduct,updateGroupBuy} from '@/api/channel';
// 导入antd组件
import {Card,Button,Table,Image,Input,message} from 'antd';
// 导入react hooks
import {useState,useEffect} from 'react';
// 导入选择商品组件
import SelectProduct from './SelectProduct';
// 定义Props接口
interface Iprops{
  setCurrent:(current:number)=>void;
  groupBuyInfo:any;
  setGroupBuyInfo:(groupBuyInfo:any)=>void;
}

// 定义组件
function AddProducts({setCurrent,groupBuyInfo,setGroupBuyInfo}:Iprops) {
  // isShow 选择商品弹窗是否显示
  const [isShow,setIsShow] = useState(false);
  // selectProduct 选择的商品数据
  const [selectProduct,setSelectProduct] = useState<any>([]);
  // groupBuyProduct 团购商品数据
  const [groupBuyProduct,setGroupBuyProduct] = useState<any>([]);
  //  监听选择商品的数据更新groupBuyProduct
  useEffect(() => {
    // 更新groupBuyProduct
    setGroupBuyProduct(selectProduct.map(
      (item:any)=>({...item,rate:5,limitBuy:2,salePrice:item.originalPrice})
    ) )}, [selectProduct]);
  // 定义done方法
  const done = async() => {
    // 创建团购（获取id）
    const {data:{data:{insertId}}} = await createGroupBuy(groupBuyInfo);
    const groupBuyId = insertId;
    // const groupBuyId = groupBuy.data.data.insertId;

    // 创建团购商品（获取团购商品的id）
    // 01 映射为一个promise数组
    var list = groupBuyProduct.map((item:any)=>createGroupBuyProduct({...item,groupBuyId}))
    // 02 执行promise数组
    const result = await Promise.all(list);
    // 03 获取团购商品的id
    const groupIds:string[] = result.map((item:any)=>item.data.data.insertId);
    // 更新团购（把团购商品id更新到团购里面）
    const res =  await updateGroupBuy({id:groupBuyId,products:groupIds.join(",")});
    // 跳转到完成页面
    if(res){
      setCurrent(2)
    }else{
      message.error("创建失败")
    }
   
  };
  // 列数据
 const columns = [
  {
    title: '商品编号',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '商品名称',
    dataIndex: 'productName',
    key: 'productName',
  },
  {
    title: '图片',
    dataIndex: 'gallery',
    key: 'gallery',
    render: (text: string) => <Image src={text.split(",")[0]} style={{ width: 50, height: 50 }} />,
  },
  {
    title: '价格',
    dataIndex: 'originalPrice',
    key: 'originalPrice',
  },
  {
    title: '规格',
    dataIndex: 'specs',
    key: 'specs',
  },
  {
    title:"优惠价格",
    dataIndex:"salePrice",
    key: 'salePrice',
    // text:当前单元格的值，record:当前行的数据，index:当前行的索引
    render:(text:string,record:any,index:any)=>(<Input style={{width:50}} value={text} onChange={(e)=>{
      // 获取当前行的数据
      const item = groupBuyProduct[index];
      // 更新当前行的数据
      item.salePrice = e.target.value;
      // 更新groupBuyProduct
      setGroupBuyProduct([...groupBuyProduct])
    }} />)
  },
  {
    title:"购买限量",
    dataIndex:"limitBuy",
    key: 'limitBuy',
    render:(text:string,record:any,index:any)=>(<Input style={{width:50}} value={text} onChange={(e)=>{
      // 获取当前行的数据
      const item = groupBuyProduct[index];
      // 更新当前行的数据
      item.limitBuy = e.target.value;
      // 更新groupBuyProduct
      setGroupBuyProduct([...groupBuyProduct])
    }} />)
  },
  {
    title:"佣金比例",
    dataIndex:"rate",
    key: 'rate',
    render:(text:string,record:any,index:any)=>(<Input 
      style={{width:50}}
      value={text} onChange={(e)=>{
      // 获取当前行的数据
      const item = groupBuyProduct[index];
      // 更新当前行的数据
      item.rate = e.target.value;
      // 更新groupBuyProduct
      setGroupBuyProduct([...groupBuyProduct])
    }} />)
  },
  {
    title:"库存",
    dataIndex:"stock",
    key: 'stock',
  }
  
];

  return ( <div>
    <div><Button onClick={()=>setIsShow(true)}>选择商品</Button></div>
    <Card title="团购商品编辑">
        <Table columns={columns} dataSource={groupBuyProduct} />
    </Card>
    <div>
      <Button onClick={() => setCurrent(0)}>上一步：编辑商品信息</Button>
      <Button onClick={done} type="primary">完成</Button>
    </div>
    <SelectProduct isShow={isShow} onCancel={()=>setIsShow(false)} onOk={(rightList)=>{
      setSelectProduct(rightList);
      setIsShow(false)
    }}/>
  </div> );
}

export default AddProducts;